import { createElement } from 'react'
import { render } from 'react-dom'
// const { createElement } = require('react')
// const { render } = require('react-dom')

// createElement (创建react元素 or 虚拟dom)

// createElement(标签名称, 属性, 子节点)
// const oDiv = createElement('div', { id: "box", className: "oBox" }, ['66666666'])


// // render (把react元素给渲染到页面)
// // render(要渲染的react元素, 挂载点, 回调)

// render(oDiv, document.getElementById('root'), () => {
//     console.log('挂载成功')
// })

const oLi1 = createElement('li', { }, ['11'])
const oLi2 = createElement('li', { }, ['22'])
const oLi3 = createElement('li', { }, ['33'])

const oUl = createElement('ul', { }, [oLi1, oLi2, oLi3])


render(oUl, document.getElementById('root'), () => {
    console.log('挂载成功')
})


// webpack  
// 1. 高级别语法转换为低版本的
// 2. 把浏览器不认识的文件转换为浏览器可以认识的文件

// jsx 
// 1. 遇到 < 开始解析html
// 2. { 开始解析js


// webpack不识别.jsx文件  把jsx文件转换为js文件 
// babel
// npm i babel-cli -g (确保能够使用bable命令)
// npm i babel-preset-react -S (用来识别react语法)
// 配置.babelrc文件  
// {
//     "presets": [
//         "react"
//     ]
// }



